<template>
  <div>
    <button class="modern-upload-btn" @click="showDialog">
      <svg viewBox="0 0 24 24" width="20" height="20">
        <path
          fill="currentColor"
          d="M21,17H7V3H21M21,1H7A2,2 0 0,0 5,3V17A2,2 0 0,0 7,19H21A2,2 0 0,0 23,17V3A2,2 0 0,0 21,1M3,5H1V21A2,2 0 0,0 3,23H19V21H3M15.96,10.29L13.21,13.83L11.25,11.47L8.5,15H19.5L15.96,10.29Z"
        />
      </svg>
      设置封面
    </button>

    <!-- 现代化对话框 -->
    <el-dialog
      v-model="dialogVisible"
      width="900px"
      :close-on-click-modal="false"
      :show-close="false"
      class="modern-dialog"
      align-center
    >
      <template #header>
        <div class="dialog-header">
          <div class="header-content">
            <div class="header-icon">
              <svg viewBox="0 0 24 24" width="24" height="24">
                <path
                  fill="currentColor"
                  d="M21,17H7V3H21M21,1H7A2,2 0 0,0 5,3V17A2,2 0 0,0 7,19H21A2,2 0 0,0 23,17V3A2,2 0 0,0 21,1M3,5H1V21A2,2 0 0,0 3,23H19V21H3M15.96,10.29L13.21,13.83L11.25,11.47L8.5,15H19.5L15.96,10.29Z"
                />
              </svg>
            </div>
            <h3>文章封面设置</h3>
          </div>
          <button class="close-btn" @click="dialogVisible = false">
            <svg viewBox="0 0 24 24" width="16" height="16">
              <path
                fill="currentColor"
                d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
              />
            </svg>
          </button>
        </div>
      </template>

      <!-- 现代化标签页 -->
      <div class="tab-container">
        <div class="tab-header">
          <button
            class="tab-item"
            :class="{ active: activeTab === 'upload' }"
            @click="activeTab = 'upload'"
          >
            <svg viewBox="0 0 24 24" width="16" height="16">
              <path fill="currentColor" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" />
            </svg>
            上传图片
          </button>
          <button
            class="tab-item"
            :class="{ active: activeTab === 'history' }"
            @click="activeTab = 'history'"
          >
            <svg viewBox="0 0 24 24" width="16" height="16">
              <path
                fill="currentColor"
                d="M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3Z"
              />
            </svg>
            历史图片
          </button>
        </div>

        <div class="tab-content">
          <!-- 上传标签页 -->
          <div v-show="activeTab === 'upload'" class="upload-section">
            <div v-if="!tempImage" class="modern-upload-area">
              <input
                ref="fileInput"
                type="file"
                accept=".jpg,.jpeg,.png,.gif,.webp"
                style="display: none"
                @change="handleFileSelect"
              />
              <div
                class="upload-zone"
                @click="triggerFileInput"
                @drop="handleDrop"
                @dragover.prevent
                @dragenter.prevent
              >
                <div class="upload-icon">
                  <svg viewBox="0 0 24 24" width="48" height="48">
                    <path fill="currentColor" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" />
                  </svg>
                </div>
                <div class="upload-text">
                  <h4>点击或拖拽上传图片</h4>
                  <p>支持 JPG、PNG、GIF、WebP 格式，最大 2MB</p>
                </div>
              </div>
            </div>

            <div v-else class="preview-container">
              <div class="preview-image-wrapper">
                <img :src="tempImage" alt="封面预览" class="preview-image" />
                <div class="preview-overlay">
                  <button class="change-btn" @click="changeImage">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                      <path
                        fill="currentColor"
                        d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"
                      />
                    </svg>
                    更换图片
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 历史图片标签页 -->
          <div v-show="activeTab === 'history'" class="history-section">
            <div class="image-grid">
              <div
                v-for="(image, index) in historyImages"
                :key="index"
                class="image-card"
                :class="{ selected: selectedImage === image }"
                @click="selectDefaultImage(image)"
              >
                <div class="image-wrapper">
                  <img :src="image" alt="历史封面" />
                  <div class="image-overlay">
                    <svg v-if="selectedImage === image" viewBox="0 0 24 24" width="24" height="24">
                      <path
                        fill="currentColor"
                        d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
                      />
                    </svg>
                  </div>
                </div>
              </div>
            </div>

            <!-- 现代化分页 -->
            <div v-if="pagination.total > pagination.pageSize" class="pagination-container">
              <el-pagination
                v-model:current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                layout="prev, pager, next"
                background
                @current-change="handlePageChange"
              />
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="handleCancel">取消</button>
          <button class="confirm-btn" :disabled="!tempImage" @click="handleConfirm">
            <svg viewBox="0 0 24 24" width="16" height="16">
              <path
                fill="currentColor"
                d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
              />
            </svg>
            确认选择
          </button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// Font Awesome icons will be used directly in template
import { uploadFileApi } from '@/api/file';
import { pageSysOss } from '@/api/oss'; // 引入分页接口
import { ElMessage } from 'element-plus';

const activeTab = ref('upload');
const selectedImage = ref('');
const historyImages = ref<string[]>([]);
const pagination = ref({
  currentPage: 1,
  pageSize: 6,
  total: 0
});

// 修改后的获取历史图片方法
const fetchHistoryImages = async () => {
  try {
    const response = await pageSysOss({
      pageNum: pagination.value.currentPage,
      pageSize: pagination.value.pageSize
    });
    historyImages.value = response.data.list.map((item: any) => item.url);
    pagination.value.total = response.data.total;
  } catch (error) {
    ElMessage.error('获取历史图片失败');
  }
};

// 新增分页改变事件处理
const handlePageChange = (page: number) => {
  pagination.value.currentPage = page;
  fetchHistoryImages();
};

onMounted(() => {
  fetchHistoryImages();
});
const selectDefaultImage = (image: string) => {
  selectedImage.value = image;
  tempImage.value = image;
};

const props = defineProps<{
  modelValue: string;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();

const dialogVisible = ref(false);
const tempImage = ref('');

// 显示弹窗
const showDialog = () => {
  dialogVisible.value = true;
  tempImage.value = props.modelValue;
};

// 上传前验证
const beforeUpload = (file: File) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('只能上传图片文件！');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！');
    return false;
  }
  return true;
};

// 自定义上传
const customUpload = async (options: any) => {
  try {
    const response = await uploadFileApi(options.file);
    if (response.data?.url) {
      tempImage.value = response.data.url;
    }
  } catch (error) {
    ElMessage.error('上传失败，请重试');
  }
};

// 取消上传
const handleCancel = () => {
  dialogVisible.value = false;
  tempImage.value = props.modelValue;
};

// 确认上传
const handleConfirm = () => {
  emit('update:modelValue', tempImage.value);
  dialogVisible.value = false;
  selectedImage.value = ''; // 重置选择
};

// 新增方法
const fileInput = ref<HTMLInputElement>();

// 触发文件选择
const triggerFileInput = () => {
  fileInput.value?.click();
};

// 处理文件选择
const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  if (file) {
    handleFileUpload(file);
  }
  // 清空input以允许重复选择同一文件
  target.value = '';
};

// 处理拖拽放置
const handleDrop = (event: DragEvent) => {
  event.preventDefault();
  const file = event.dataTransfer?.files[0];
  if (file) {
    handleFileUpload(file);
  }
};

// 处理文件上传
const handleFileUpload = async (file: File) => {
  if (!beforeUpload(file)) return;

  try {
    const response = await uploadFileApi(file);
    if (response.data?.url) {
      tempImage.value = response.data.url;
    }
  } catch (error) {
    ElMessage.error('上传失败，请重试');
  }
};

// 更换图片
const changeImage = () => {
  tempImage.value = '';
};
</script>

<style scoped lang="scss">
// 现代化上传按钮
.modern-upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: #5f6368;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  &:hover {
    background: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.2);
    color: #202124;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  &:active {
    transform: translateY(0);
  }

  svg {
    color: #5f6368;
    transition: color 0.2s ease;
  }

  &:hover svg {
    color: #1967d2;
  }
}

// 现代化对话框
:deep(.modern-dialog) {
  .el-dialog {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  .el-dialog__header {
    padding: 0;
    margin: 0;
  }

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__footer {
    padding: 20px 24px;
    background: #fafbfc;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  .header-content {
    display: flex;
    align-items: center;
    gap: 12px;

    .header-icon {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #1967d2 0%, #1557b0 100%);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #202124;
    }
  }

  .close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #5f6368;
    transition: all 0.2s ease;

    &:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #202124;
    }
  }
}

// 现代化标签页
.tab-container {
  .tab-header {
    display: flex;
    padding: 0 24px;
    background: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);

    .tab-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 16px 20px;
      background: none;
      border: none;
      color: #5f6368;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      position: relative;
      transition: all 0.2s ease;

      &:hover {
        color: #202124;
        background: rgba(0, 0, 0, 0.02);
      }

      &.active {
        color: #1967d2;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 20px;
          right: 20px;
          height: 2px;
          background: #1967d2;
          border-radius: 1px;
        }
      }

      svg {
        transition: color 0.2s ease;
      }
    }
  }

  .tab-content {
    padding: 24px;
    min-height: 400px;
    background: #fafbfc;
  }
}

// 现代化上传区域
.modern-upload-area {
  .upload-zone {
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;

    &:hover {
      border-color: #1967d2;
      background: rgba(25, 103, 210, 0.02);
    }

    &:active {
      transform: scale(0.98);
    }

    .upload-icon {
      color: #5f6368;
      margin-bottom: 16px;
      transition: color 0.2s ease;
    }

    &:hover .upload-icon {
      color: #1967d2;
    }

    .upload-text {
      h4 {
        margin: 0 0 8px 0;
        font-size: 16px;
        font-weight: 500;
        color: #202124;
      }

      p {
        margin: 0;
        font-size: 13px;
        color: #5f6368;
      }
    }
  }
}

// 预览容器
.preview-container {
  .preview-image-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    .preview-image {
      width: 100%;
      height: 300px;
      object-fit: cover;
      display: block;
    }

    .preview-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;

      .change-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: white;
        border: none;
        border-radius: 8px;
        color: #5f6368;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transform: translateY(10px);
        transition: all 0.3s ease;

        &:hover {
          background: #f8f9fa;
          color: #202124;
        }
      }
    }

    &:hover .preview-overlay {
      opacity: 1;

      .change-btn {
        transform: translateY(0);
      }
    }
  }
}

// 历史图片区域
.history-section {
  .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;

    .image-card {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background: white;
      border: 2px solid transparent;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      }

      &.selected {
        border-color: #1967d2;
        box-shadow: 0 4px 16px rgba(25, 103, 210, 0.3);

        .image-overlay {
          background: rgba(25, 103, 210, 0.8);

          svg {
            opacity: 1;
            transform: scale(1);
          }
        }
      }

      .image-wrapper {
        position: relative;
        aspect-ratio: 16/9;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .image-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.3);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background 0.3s ease;

          svg {
            width: 32px;
            height: 32px;
            color: white;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.3s ease;
          }
        }
      }

      &:hover .image-overlay {
        background: rgba(0, 0, 0, 0.5);

        svg {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;

    :deep(.el-pagination) {
      .el-pagination__btn,
      .el-pager li {
        border-radius: 6px;
        margin: 0 2px;
        transition: all 0.2s ease;

        &:hover {
          transform: translateY(-1px);
        }

        &.is-active {
          background: #1967d2;
          color: white;
        }
      }
    }
  }
}

// 对话框底部
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  .cancel-btn,
  .confirm-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .cancel-btn {
    background: white;
    color: #5f6368;
    border: 1px solid rgba(0, 0, 0, 0.1);

    &:hover {
      background: #f8f9fa;
      color: #202124;
      border-color: rgba(0, 0, 0, 0.2);
    }
  }

  .confirm-btn {
    background: #1967d2;
    color: white;

    &:hover:not(:disabled) {
      background: #1557b0;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(25, 103, 210, 0.3);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }
  }
}
</style>
